<template>
	<view>
		<view style="margin: 20rpx;color: #ccc;">
			请根据所需资料进行填写修改
		</view>
		<view style="background-color: white">
			<!-- 基础表单校验 -->
			<up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
				<view class="form_part">
					<up-form-item label="登录账号" prop="account" border-bottom>
						<up-input type="number" placeholder="请输入登录账号" border="none" v-model="form.account"
							clearable></up-input>
					</up-form-item>
					<up-form-item label="手机号" prop="account" border-bottom>
						<up-input type="number" placeholder="请输入手机号" border="none" v-model="form.sendMobilePhone"
							clearable></up-input>
					</up-form-item>
					<up-form-item label="新的密码" prop="password" border-bottom>
						<up-input placeholder="请输入新的密码" border="none" v-model="form.password" clearable></up-input>
					</up-form-item>
					<up-form-item label="重复密码" prop="repeatPassword" border-bottom>
						<up-input placeholder="请重复输入新的密码" border="none" v-model="form.repeatPassword"
							clearable></up-input>
					</up-form-item>
					<up-form-item label="验证码" prop="code">
						<up-input type="number" border="none" v-model="form.code" placeholder="请输入验证码"
							clearable></up-input>
						<template v-slot:right>
							<up-code :seconds="60" ref="uCode" @change="codeChange"></up-code>
							<up-button type="primary" @tap="getCode">{{ tips }}</up-button>
						</template>
					</up-form-item>
				</view>
			</up-form>
		</view>
		<view class="form_button">
			<up-button type="primary" @click="submit">提交</up-button>
		</view>
		<view class="text-center" style="margin-top: 20px;">
			<text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import {
	reactive,
	ref
} from 'vue'
import {
	forgotPasswordGetCode,
	updatePassword
} from '@/api/login'
import {
	encrypt
} from "@/utils/encryption.js"

/* 数据 */
// 表单
const formRef = ref(null)
const form = reactive({
	account: '',
	sendMobilePhone: '',
	password: '',
	repeatPassword: '',
	code: ''
})
// 校验规则
const rules = reactive({
	'account': [{
		type: 'string',
		required: true,
		message: '手机号不能为空',
		trigger: ['blur', 'change']
	},
	{
		pattern: /(^1[3-9][0-9]{9}$)/g,
		message: '手机格式错误',
		trigger: ['blur', 'change']
	}
	],
	'sendMobilePhone': [{
		type: 'string',
		required: true,
		message: '手机号不能为空',
		trigger: ['blur', 'change']
	},
	{
		pattern: /(^1[3-9][0-9]{9}$)/g,
		message: '手机格式错误',
		trigger: ['blur', 'change']
	}
	],
	'password': {
		type: 'string',
		required: true,
		message: '新密码不能为空',
		trigger: ['blur', 'change']
	},
	'repeatPassword': {
		type: 'string',
		required: true,
		message: '重复密码不能为空',
		trigger: ['blur', 'change']
	},
	'code': {
		type: 'string',
		required: true,
		message: '验证码不能为空',
		trigger: ['blur', 'change']
	}
})
// 验证码提示
const tips = ref('')
const uCode = ref(null)

// 提示
const uToastRef = ref(null)



/* 函数 */
// 获取验证码tips转换
const codeChange = (text) => {
	tips.value = text
}
// 获取验证码
const getCode = async () => {
	if (!form.account || !(/(^1[3-9][0-9]{9}$)/g).test(form.account)) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "账号必须为11位电话号码"
		})
		return
	}
	if (form.password !== form.repeatPassword) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "两个密码不一致"
		})
		return
	}
	if (uCode.value.canGetCode) {
		uToastRef.value.show({
			type: 'loading',
			message: "正在获取验证码",
			duration: -1
		})
		let codeRes = await forgotPasswordGetCode({
			account: encrypt(form.account),
			sendMobilePhone: encrypt(form.sendMobilePhone)
		})
		uToastRef.value.hide()
		if (codeRes.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "验证码已发送"
			})
			// 通知验证码组件内部开始倒计时
			uCode.value.start()
		}
	} else {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "倒计时结束后再发送"
		})
	}
}
// 提交
const submit = async () => {
	let valid = await formRef.value.validate()
	if (valid) {
		if (form.password !== form.repeatPassword) {
			uToastRef.value.show({
				position: "top",
				type: 'error',
				message: "两个密码不一致"
			})
			return
		}
		uToastRef.value.show({
			type: 'loading',
			message: "请稍候",
			duration: -1
		})
		// let params = {
		// 	account: encrypt(form.account),
		// 	phone: encrypt(form.sendMobilePhone),
		// 	confirmPassword: encrypt(form.repeatPassword),
		// 	password: encrypt(form.password),
		// 	code: encrypt(form.code)
		// }
		let params = {
			account: form.account,
			phone: form.sendMobilePhone,
			confirmPassword: form.repeatPassword,
			password: form.password,
			code: form.code
		}
		let res = await updatePassword(params)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "修改成功",
				complete() {
					uni.reLaunch({
						url: "/pages/login"
					})
				}
			})
		}
	}
}
// 回到登录页
const handleUserLogin = () => {
	uni.reLaunch({
		url: "/pages/login"
	})
}
</script>

<style>
.form_part {
	background-color: #fff;
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.form_button {
	margin-left: 5%;
	width: 90%;
}
</style>